<script setup lang="ts">
import { onMounted, onUpdated, reactive ,ref  } from 'vue';
import { ElMessage } from 'element-plus'
import {getCompany,getMeterRecord,getMode,addModeRecord } from "@/api/WarehouseMonitoring"
// 定义状态数组
const statuses = ['未监控', '报警中', '合格', '全部'];

// 使用 ref 来定义选中的状态
const selectedStatus = ref('全部'); // 默认选中的状态

// 定义点击事件处理器
function selectStatus(status:any,index:any) {
  selectedStatus.value = status;
  console.log(index);
  state.pageInfo.statusesId=index;
  getInfo();
}

//分页相关函数
const getPage = (newPage:any) => {
    state.pageInfo.pageNum = newPage;
    getInfo();
    //console.log(`当前页码已变更为: ${newPage}`);
};

const state = reactive({
    company:[
      {
        id:1,
        name:"xxx"
      }
    ],
    pageInfo:{
        pageNum:1,
        pageSize:20,
        companyId:"",
        statusesId:"3",
    },
    total:"",
    meter:[
        {   id:"",
            sn:"DEV1002",
            tem:"18",
            maxTem:"20",
            minTem:"10",
            temAlarm:"0",
            hum:"20",
            maxHum:"30",
            minHum:"10",
            humAlarm:"0",
            warehouseId:"3",
            warehouse:"苍穹一号库"
        },
    ],
    alarmMode:[
        {
            id:"1",
            operation:"偶见异常观察中"
        },
        {
            id:"2",
            operation:"故障中等待维修"
        },
    ],
})

async function findByCompany() {
    var {data} = await getMeterRecord(state.pageInfo);
    state.meter = data.data.rows;
    state.total = data.data.total;
}


async function getInfo(){
    var company = await getCompany();
    state.company = company.data.data;
    var {data} = await getMeterRecord(state.pageInfo);
    state.meter = data.data.rows;
    state.total = data.data.total;
    var mode = await getMode();
    state.alarmMode = mode.data.data;
}

const dialogVisible = ref(false)
const saveFrom = reactive({
    warehouseId:"",
    operation:""
})
async function operate(id:any) {
    dialogVisible.value=true;
    // console.log(id);
    saveFrom.warehouseId=id;
}

function cancel(){
    dialogVisible.value=false;
    saveFrom.operation = "";
}

async function save() {
    dialogVisible.value = false;
    console.log(saveFrom.warehouseId);
    console.log(saveFrom.operation);
    var {data} = await addModeRecord(saveFrom);
    if(data.code == 200){
    ElMessage({
      type: 'success',
      message: '保存成功',
    })
    }else{
      ElMessage({
      type: 'info',
      message: '保存失败',
    })
  }
}

onMounted(() => {
 getInfo();
});
</script>

<template>
    <div>
        仓储监控
        <div class="select">
            <el-select v-model="state.pageInfo.companyId" placeholder="企业名称" style="width: 240px" @blur="findByCompany()">
                <el-option
                    v-for="item in state.company"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                />
            </el-select>
        </div>
        <el-button 
        v-for="(status, index) in statuses" 
        :key="index" 
        :class="['button', { 'highlight': selectedStatus === status }]" 
        @click="selectStatus(status,index)">
        {{ status }}
        </el-button>
    </div>

    <div class="map">

        <div class="box" v-for="item in state.meter" :key="item.id">

            <div style="width: 100%; height: 100%;" v-if="item.temAlarm == '0' && item.humAlarm == '0'">
                <div class="title">
                    <span style="margin-left: 10px;">{{ item.warehouse }}</span>
                </div>
                <div class="data">
                    <div class="tem" style="width: 100%; height: 50%; line-height: 250%; border-bottom: 1px solid rgb(214, 230, 246);">
                        <span class="iconfont icon-wendu"></span>{{item.tem}}℃<span style="float: right;margin-right: 10px;">{{item.minTem}}/{{item.maxTem}}</span>
                    </div>
                    <div class="hum" style="width: 100%; height: 50%; line-height: 250%; ">
                        <span class="iconfont icon-shidu"></span>{{item.hum}}%<span style="float: right;margin-right: 10px;">{{item.minHum}}/{{item.maxHum}}</span>
                    </div>
                </div>
            </div>


            <div style="width: 100%; height: 100%;" v-else>
                <div class="title2">
                    <span style="margin-left: 10px;">{{ item.warehouse }}</span>
                    <span style="float: right;margin-right: 10px; font-size: larger;"><el-icon @click="operate(item.warehouseId)" style="cursor: pointer;"><Notification /></el-icon></span>
                </div>
                <div class="data">
                    <div class="tem" style="width: 100%; height: 50%; line-height: 250%; border-bottom: 1px solid rgb(214, 230, 246);">
                        <span class="iconfont icon-wendu"></span>
                        <span :class="{'color':item.temAlarm != '0'}">{{item.tem}}</span>℃
                        <span style="float: right;margin-right: 10px;">{{item.minTem}}/{{item.maxTem}}</span>
                    </div>
                    <div class="hum" style="width: 100%; height: 50%; line-height: 250%; ">
                        <span class="iconfont icon-shidu"></span>
                        <span :class="{'color':item.humAlarm != '0'}">{{item.hum}}</span>%
                        <span style="float: right;margin-right: 10px;">{{item.minHum}}/{{item.maxHum}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="example-pagination-block">
      <el-pagination background layout="prev, pager, next" 
      :total="state.total" 
      @current-change="getPage" 
      v-model:current-page="state.pageInfo.pageNum"/>
    </div>

    <el-dialog v-model="dialogVisible" title="报警处理措施" width="700" draggable @close="cancel()">
        <el-select
            v-model="saveFrom.operation"
            placeholder="请选择处理方式"
            clearable
            style="width: 200px;margin-top: 40px;"
          >
          <el-option v-for="item in state.alarmMode"
            :key="item.id"
            :label="item.operation"
            :value="item.operation"/>
          </el-select>

        <template #footer>
            <div class="dialog-footer" style="margin-top: 50px;">
                <el-button @click="cancel()">取消</el-button>
                <el-button type="primary" @click="save()">
                保存
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style scoped>
@import '../../icon/iconfont.css';
/* 分页样式 */
.example-pagination-block {
  margin-top: 10px;
  float: right;
}

.map {
    width: 100%;
    height: 680px;
    background-color: white;
    margin-top: 20px;
    border-radius: 10px;
    overflow:hidden
}

.box {
    width: 18%;
    height: 20%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 添加边框阴影 */
    border-radius: 10px;
    margin-top: 20px;
    margin-left: 20px;
    float: left;
}

.title {
    width: 100%;
    height: 34%;
    background-color: rgb(214, 230, 246);
    color: #409EFF;
    line-height: 46px;
    border-radius: 10px 10px 0 0;
}

.title2 {
    width: 100%;
    height: 34%;
    background-color: rgb(255, 255, 255);
    color: #409EFF;
    line-height: 46px;
    border-radius: 10px 10px 0 0;
}

.color {
    color: #fc0000;
}

.data {
    width: 93%;
    height: 66%;
    margin-left: 10px;
}

.select {
    display: inline-block;
    margin: 5px;
    float:right;
}

.button {
    display: inline-block;
    margin: 5px;
    float:right;
}
.highlight {
  background-color: #409EFF; /* 高亮颜色 */
  color: white;
}
</style>